<template>
	<section>
		<!--高级查询-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="searchEmployee" >
				<el-form-item label="用户名">
					<el-input v-model="searchEmployee.username"  placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="searchEmployee.email"  placeholder="邮箱"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchEmployee.state" placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option label="在职" value="1"></el-option>
						<el-option label="离职" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getEmployees">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<!--表格-->
		<el-table :data="Employee" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<!--最前面的选择框-->
			<el-table-column type="selection">
			</el-table-column>
			<!--行号-->
			<el-table-column type="index" label="序号" width="80px" align="center">
			</el-table-column>
			<el-table-column prop="username" label="用户名" sortable align="center">
			</el-table-column>
			<el-table-column prop="phone" label="电话号码" sortable align="center">
			</el-table-column>

			<el-table-column prop="email" label="邮箱" sortable align="center">
			</el-table-column>
			<el-table-column prop="age" label="年龄" sortable align="center">
			</el-table-column>
			<el-table-column prop="state" label="是否在职" sortable align="center" :formatter="stateForMatter">
			</el-table-column>
			<el-table-column label="操作" width="150" align="center">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--添加和编辑会话框-->
		<el-dialog
				title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

			<el-form ref="form" :model="form" label-width="80px" class="demo-ruleForm">
				<el-form-item label="用户名" prop="username" >
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password" >
					<el-input v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email" >
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item label="电话号码" prop="phone" >
					<el-input v-model="form.phone"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age" >
					<el-input v-model="form.age"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state" >
					<el-radio-group v-model="form.state">
						<!--1  启用  0 禁用-->
						<el-radio :label="1">在职</el-radio>
						<el-radio :label="0">离职</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addEmployee">确 定</el-button>
			  </span>
		</el-dialog>


	</section>
</template>

<script>
	export default {
		data() {
			return {
				//列表前勾选框
				sels:[],
				//员工列表数据
				Employee:[],
				//加载动作默认false
				listLoading: false,
				//默认页码1
				currentPage:1,
				//每页显示条数默认10
				pageSize:10,
				//总条数默认0
				total:0,
				//高级查询表单
				searchEmployee:{
					username:"",
					email:"",
					state:""
				},
				//添加编辑对话框默认关闭
				dialogVisible: false,
				//添加和编辑会话框属性内容
				form:{
					//用户名
					username: "",
					//密码
					password:"",
					//电话号码
					phone:"",
					//邮箱
					email:"",
					//年龄
					age:"",
					//状态
					state:1
				}
			}
		},
		methods: {
			//添加和编辑会话框确定按钮
			addEmployee(){
				//进行验证
				this.$refs.form.validate((valid) => {
					if (valid) {
						//判断id是否为null
						if(!this.form.id){
							//调用添加方法Ajax
							this.addAjax();
						}else {
							//调用方法
							this.updateAjax();
						}
						//关闭会话框
						this.dialogVisible = false;
					} else {
						//验证失败提示友好信息
						return this.$message.error("未按要求填写数据！！！");;
					}
				});
			},
			//关闭会话框
			handleClose(){
				//关闭
				this.dialogVisible = false;
			},
			//对是否在职进行判断
			stateForMatter(row,column){
				//如果等于1在职，等于0离职
				return row.state == 1 ? "在职" : "离职";
			},
			//新增按钮
			handleAdd(){
				//循环个表单清空值
				for (let k in this.form){
					this.form[k] = "";
				}
				//重新设置默认在职
				this.form.state = 1;
				//打开会话框
				this.dialogVisible = true;
			},
			//高级查询查询按钮
			getEmployees(){
				//重新加载请求
				this.loadAllEmployee();
			},
			//页面页码改变
			handleCurrentChange(row){
				//给页码赋值
				this.currentPage = row;
				//重新加载请求
				this.loadAllEmployee();
			},
			//批量删除
			batchRemove(){
				/*点击批量删除弹出提示框*/
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取到批量删除的id传递一个数组  /del  匹配批量删除
					let ids = this.sels.map(item => item.id);
					this.$http.patch("/shop/del",ids).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.searchEmployee={
								username: "",
								email: "",
								state: ""
							}
							//调用方法
							this.loadAllEmployee();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});



			},
			//删除
			handleDel(index,row){
				/*点击删除弹出提示框*/
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//获取id
					let id = row.id;
					this.$http.delete("/employee/"+id).then((res => {
						if (res.data.success){
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							//调用方法
							this.loadAllEmployee();
						}else {
							//删除失败提示友好信息
							this.$message.error(res.data.msg);
						}
					}));

				}).catch(() => {
					//取消删除不给任何提示
				});

			},
			//编辑
			handleEdit(index,row){
				//回显
				for(let k in row){
					this.form[k] = row[k];
				}

				//打开会话框
				this.dialogVisible = true;
			},
			//列表前面的勾选框
			selsChange(sels){
				this.sels = sels;
			},
			//查询所有员工
			loadAllEmployee(){
				//打开加载动作
				this.listLoading = true;
				//设置json格式参数
				let param = {
					"currentPage":this.currentPage, "pageSize": this.pageSize,
					"username":this.searchEmployee.username,"email":this.searchEmployee.email,
					"state":this.searchEmployee.state
				}
				//发送分页查询请求
				this.$http.patch("/employee",param).then((res => {
					console.debug(res)
					//给员工表格设置值
					this.Employee = res.data.result;
					//总条数
					this.total = res.data.total;
				}));
				//打开加载动作
				this.listLoading = false;
			},
			//添加发送的Ajax
			addAjax(){
				//获取到表单中的数据
				let param = {
					"username": this.form.username, "password": this.form.password, "email": this.form.email,
					"age":this.form.age,"state":this.form.state,"phone": this.form.phone
				};

				this.$http.put("/employee",param).then((res => {
					if (res.data.success){
						this.$message.success("添加成功");
						//刷新
						this.loadAllEmployee();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}
				}));
			},
			//修改发送的Ajax
			updateAjax(){
				//获取到表单中的数据
				let param = {
					"id": this.form.id,"username": this.form.username, "password": this.form.password, "email": this.form.email,
					"age": this.form.age, "state": this.form.state,"phone": this.form.phone
				};
				this.$http.post("/employee",param).then((res => {
					//console.debug("添加响应数据",res)
					if (res.data.success){
						this.$message.success("修改成功");
						//刷新
						this.loadAllEmployee();
					}else {
						//删除失败提示友好信息
						this.$message.error(res.data.msg);
					}
				}));
			},
		},
		//页面加载完成的时候执行
		mounted() {
			//页码加载完成执行查询所有员工
			this.loadAllEmployee();

		}
	}

</script>